<template>
    <div class="box">
        <div class="header">
            <span class="date">{{ date }}</span>
            <span class="addr">{{ city }}</span>
            <!-- 点击跳出来个弹窗显示未来天气走向 -->
            <span class="btn" @click="clickHandler">查看天气预报</span>
        </div>
        <div class="main">
            <!-- 左侧显示当前温度 天气文字 和天气图片 -->
            <div class="left">
                <div class="w-text">
                    <div class="hh">{{ realtime.temperature + '℃' }}</div>
                    <p>{{ realtime.info }} {{ realtime.direct }}</p>
                </div>
                <div class="w-image">
                    <img :src="weatherImg" />
                </div>
            </div>

            <!-- 右侧为当前地区具体天气等信息 -->
            <ul class="right">
                <li>
                    <span>湿度:</span>
                    <p>{{ realtime.humidity + '%' }}</p>
                </li>
                <li>
                    <span>空气指数:</span>
                    <p>{{ realtime.aqi }}</p>
                </li>
                <li>
                    <span>积温:</span>
                    <p>{{ realtime.temperature + '℃' }}</p>
                </li>
                <li>
                    <span>风向:</span>
                    <p>{{ realtime.direct }}</p>
                </li>
                <li>
                    <span>风速:</span>
                    <p>{{ realtime.power }}</p>
                </li>
                <li>
                    <span>天气:</span>
                    <p>{{ realtime.info }}</p>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="zuo">
                <span>数据来源:</span>
                <p>聚合数据</p>
            </div>
            <div class="you">
                <span>更新时间:</span>
                <p>{{ time }}</p>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { getSrc, getWeather } from '@/api/WeatherApi';
import type { ICurrentWeather } from '@/interface/IWeather';
import { onBeforeMount, reactive, ref, watch, type ModelRef, type Reactive, type Ref } from 'vue';
// 变量
// 当前地区的今天天气
let realtime: Reactive<ICurrentWeather> = reactive({
    aqi: '',
    direct: '',
    humidity: '',
    info: '',
    power: '',
    temperature: '',
    wid: ''
})
// 当前城市
const city: Ref<string> = ref('北京')
// 天气显示的图片src，根据realtime当中info字符串判别渲染不同的src
const weatherImg: Ref<string> = ref('/img/中雨.png')
// 获取天气时候的时间
const time: Ref<string> = ref('')
// 日期
const date: Ref<string> = ref('')
// 控制预报开关
const reportFlag: ModelRef<boolean> = defineModel("reportFlag", { required: true })
// 预报数组
const futureList:Ref<Array<any>> = ref([])
const emits = defineEmits(["transList"])
// 函数
const clickHandler = () => {
    // 开启预报弹窗
    if (!reportFlag.value) reportFlag.value = true
    // 把future抛发给父组件
    emits("transList",futureList.value)
}
// 格式化当前日期的函数
const formatDate = () => {
    const nyr = new Date().toLocaleDateString().split('/')
    date.value = nyr[0] + '年' + nyr[1] + '月' + nyr[2] + '日' + '星期' + new Date().getDay()
}

onBeforeMount(async () => {
    const result = await getWeather('北京')
    // 把当前选择的某地赋值给currentCity
    console.log(result)
    realtime = result.result.realtime
    city.value = result.result.city
    futureList.value = result.result.future
    // 获取天气时的时间
    time.value = (new Date().toLocaleString())
    // 格式化日期
    formatDate()
    // 获取天气对应的图片
    const src = await getSrc(result.result.realtime.info)
    weatherImg.value = src
})
</script>

<style lang='scss' scoped>
.box {
    li {
        height: 100px;
        width: 100px;
        list-style-type: none;
    }

    span {
        display: block;
    }

    margin: 20px;
    height: 300px;
    width: 500px;
    background-color: #132E3F;
    color: white;
    border-radius: 7px;

    .footer {
        height: 50px;
        width: 100%;
        text-align: center;
        line-height: 50px;
        display: flex;
        font-size: 13px;

        div {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
                margin: 0;
                color: white;
            }

            span {
                color: lightgray;
            }
        }

        .zuo {
            width: 150px;
        }

        .you {
            width: 350px;
        }
    }

    .main {
        height: 200px;
        width: 100%;
        display: flex;
        border-bottom: 1px solid gray;

        .left {
            height: 100%;
            width: 150px;
            margin-top: 10px;

            .w-text {
                height: 50%;
                width: 100%;

                .hh {
                    height: 70px;
                    font-size: 50px;
                    text-align: center;
                    line-height: 80px;
                    margin-left: 20px;
                    font-weight: bold;
                }

                p {
                    height: 15px;
                    font-size: 13px;
                    text-align: center;
                    line-height: 0;
                    margin-left: 30px;
                    color: lightgray;
                }
            }

            .w-image {
                display: block;
                height: 50%;
                width: 100%;
                text-align: center;
                line-height: 100px;

                img {
                    margin-left: 40px;
                    height: 80%;
                    width: 80%;
                }
            }

        }

        .right {
            list-style: none;
            height: 200px;
            width: 350px;
            display: flex;
            flex-wrap: wrap;

            li {
                margin: 10px 3px;
                height: 80px;
                width: 100px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                span,
                p {
                    height: 20px;
                    width: 80px;
                    text-align: center;
                    line-height: 20px;
                    margin: 5px;
                }

                span {
                    font-size: 13px;
                    color: lightgrey;
                }

                p {
                    font-size: 16px;
                }
            }
        }

    }

    .header {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .date {
            font-size: 14px;
            font-weight: bold;
        }

        .addr {
            font-size: 13px;
            color: lightgray;
        }

        .btn {

            height: 30px;
            width: 80px;
            background-color: #368B90;
            font-size: 11px;
            line-height: 30px;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
        }
    }
}
</style>